<!-- 指标异常 -->
<div class="layuimini-container">

	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<form class="layui-form" id="form" action="">

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">异常指标</label>
					<div class="layui-input-inline">
						<select id="glu" name="glu" lay-filter="glu">
							<option value="">请选择</option>
							<option value="1">血糖</option>
							<option value="2">血压</option>
							<option value="3">身体指标</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label"> 所属总店</label>
					<div class="layui-input-inline">
						<select name="mainStore" id="mainStore" lay-filter="mainStore">
							<option value="">请选择</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label"> 所属分店</label>
					<div class="layui-input-inline">
						<select name="subStore" id="subStore" lay-filter="subStore">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">年龄段</label>
					<div class="layui-input-inline">
						<select name="age" lay-filter="age">
							<option value="">全部</option>
							<option value="0-18">0-18</option>
							<option value="18-30">18-30</option>
							<option value="30-40">30-40</option>
							<option value="40-50">40-50</option>
							<option value="50-60">50-60</option>
							<option value="60-70">60-70</option>
							<option value="70-80">70-80</option>
							<option value="80-90">80-90</option>
							<option value="90-100">90-100</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<select name="sex" lay-filter="sex">
							<option value="">全部</option>
							<option value="1">男</option>
							<option value="0">女</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">筛选日期</label>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="开始日" name="start" id="start" autocomplete="off"/>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="截止日" name="end" id="end" autocomplete="off"/>
					</div>
				</div>
			</div>


			<!-- 搜索按钮 -->
			<div class="layui-input-block" align="right">
				<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
					 class="fa fa-search"></i> 查询
				</button>
				<button type="submit" id="reset" lay-filter="data-reset-btn" lay-submit class="layui-btn layui-btn-normal"><i class="fa fa-refresh"></i>
					重置 </button>
				<button type="submit" id="export" class="layui-btn layui-btn-normal"><i class="fa fa-bar-chart"></i> 导出报表 </button>
			</div>

		</form>
	</div>

	<!-- 图形报表 -->
	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<h2 id="axs" align="center" style="margin-bottom:30px;"></h2>
			<div id="myChart" style="width:85%; height: 700px; padding-left:100px; margin-left:auto; margin-right:auto;"></div>
	</div>

</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script src="js/lay-module/echarts/echarts.js"></script>
<script type="text/javascript">
	// 基于准备好的dom，指定样式infographic,初始化echarts实例
	function getMax(data) {
		return data.length + 2;
	}

	function getTime(obj) {
		var time = [];
		for (var i = 0; i < obj.length; i++) {
			time[i] = obj[i].testTime;
		}
		const set = new Set(time);
		return [...set];
	}

	function getSex(obj) {
		var aasex = [];
		if (obj.sex == "") {
			aasex = ['男', '女', '合计'];
		} else if (obj.sex == 1) {
			aasex = ['男']
		} else {
			aasex = ['女']
		}
		return aasex;
	}
	
	function startTime(){
		var data="";
		var myDate = new Date();
		var myMonth=myDate.getMonth();
		data+=myDate.getFullYear()+'-'+(myMonth+1)+'-';
		myDate.setMonth(myMonth+1);
		myDate.setDate(1);
		data+=myDate.getDate();
		return data;
	}
	
	function endTime(){
		var data="";
		var myDate = new Date();
		var myMonth=myDate.getMonth();
		data+=myDate.getFullYear()+'-'+(myMonth+1)+'-';
		myDate.setMonth(myMonth+1);
		myDate.setDate(0);
		data+=myDate.getDate();
		return data;
	}
	
	// [{// 		name: '男',// 		type: 'bar',// 		yAxisIndex: 0,// 		data: [3, 6, 1, 12, 4, 1, 7, 5, 1, 4, 6, 2]// 	},// 	{// 		name: '女',// 		type: 'bar',// 		yAxisIndex: 0,// 		data: [3, 3, 9, 5, 6, 3, 0, 11, 5, 5, 9, 1]// 	},// 	{// 		name: '合计',// 		type: 'bar',// 		yAxisIndex: 0,// 		data: [6, 9, 10, 17, 10, 4, 7, 16, 6, 9, 15, 3]// 	}// ]
	function getSeries(obj, data) {
		var series = [];
		if (obj.sex == "") {
			var bar1 = [];
			var bar0 = [];
			var bar = [];
			var time = getTime(data);
			for (var i = 0; i < time.length; i++) {
				var n = 0;
				var v = 0;
				for (var j = 0; j < data.length; j++) {
					if (data[j].sex == 0 && time[i] == data[j].testTime) {
						v += 1;
					} else if (data[j].sex == 1 && time[i] == data[j].testTime) {
						n += 1;
					}
				};
				bar1[i] = n;
				bar0[i] = v;
				bar[i] = bar0[i] + bar1[i];
			}
			series[0] = {
				name: '男',
				type: 'bar',
				yAxisIndex: 0,
				data: bar1
			};
			series[1] = {
				name: '女',
				type: 'bar',
				yAxisIndex: 0,
				data: bar0
			};
			series[2] = {
				name: '合计',
				type: 'bar',
				yAxisIndex: 0,
				data: bar
			};
		} else if (obj.sex == 1) {
			var bar1 = [];
			var time = getTime(data);
			for (var i = 0; i < time.length; i++) {
				var n = 0;
				for (var j = 0; j < data.length; j++) {
					if (data[j].sex == 1 && time[i] == data[j].testTime) {
						n += 1;
					}
				};
				bar1[i] = n;
			}
			series[0] = {
				name: '男',
				type: 'bar',
				yAxisIndex: 0,
				data: bar1
			};
		} else {
			var bar0 = [];
			var time = getTime(data);
			for (var i = 0; i < time.length; i++) {
				var v = 0;
				for (var j = 0; j < data.length; j++) {
					if (data[j].sex == 0 && time[i] == data[j].testTime) {
						v += 1;
					}
				};
				bar0[i] = v;
			}
			series[0] = {
				name: '女',
				type: 'bar',
				yAxisIndex: 0,
				data: bar0
			};
		}
		return series;
	}

	function init(obj) {
		$.ajax({
			url: 'http://localhost:8004/sccReportList/test',
			type: 'post',
			data: {
				"data": JSON.stringify(obj)
			},
			success: function(result) {
				if (result.success) {
					var data = result.data;
					Date.prototype.toLocaleString = function() {
						undefined
						return this.getFullYear() + "年" + (this.getMonth() + 1) + "月";
					};
					for (var i = 0; i < data.length; i++) {
						var oldTime = (new Date(data[i].testTime)).getTime();
						var unixTimestamp = new Date(oldTime * 1);
						commonTime = unixTimestamp.toLocaleString();
						data[i].testTime = commonTime;
					}
					var myChart = echarts.init(document.getElementById('myChart'), 'infographic');
					var colors = ['#007DDB', '#EEA236', '#869FB1'];
					option = {
						color: colors,
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						grid: {
							right: '20%'
						},
						toolbox: {
							feature: {
								dataView: {
									show: true,
									readOnly: false
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						legend: {
							data: getSex(obj)
						},
						xAxis: [{
							type: 'category',
							axisTick: {
								alignWithLabel: true
							},
							data: getTime(data)
						}],
						yAxis: [{
							type: 'value',
							//name: '血糖异常数据表',
							min: 0,
							max: getMax(data),
							position: 'left',
							axisLine: {
								lineStyle: {
									color: colors[2]
								}
							},
							axisLabel: {
								formatter: '{value}'
							}
						}],
						series: getSeries(obj, data)
					};
					<!--使用指定的配置项和数据显示图表-->
					myChart.setOption(option);
				} else {
					alert("?");
				}
				
			}
		});
	}
</script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;
		//渲染form表单
		form.render();
		form.on('select(mainStore)', function(data) {
			var str = document.getElementById("mainStore").value;
			if (str != "") {
				$.ajax({
					url: 'http://localhost:8004/sccPatient/subStore',
					type: 'get',
					async: false,
					data: {
						"mainStoreCode": str
					},
					success: function(result) {
						var data = result.data;
						var subStore = document.getElementById("subStore");
						for (var i = 0; i < data.length; i++) {
							var option = document.createElement("option");
							option.setAttribute("value", data[i].storeCode);
							option.innerText = data[i].storeName;
							subStore.appendChild(option);
						}
						form.render("select");
					}
				});
			}
		});
		layer.ready(function() {
			$.ajax({
				url: 'http://localhost:8004/sccPatient/mainStore',
				type: 'get',
				async: false,
				success: function(result) {
					var data = result.data;
					var mainStore = document.getElementById("mainStore");
					for (var i = 0; i < data.length; i++) {
						var option = document.createElement("option");
						option.setAttribute("value", data[i].storeCode);
						option.innerText = data[i].storeName;
						mainStore.appendChild(option);
					}
					form.render("select");
				}
			});
		});
		//日期
		laydate.render({
			elem: '#start'
		});

		laydate.render({
			elem: '#end'
		});
		form.on('submit(data-reset-btn)', function(data) {
			echarts.init(document.getElementById('myChart')).dispose();
			document.getElementById("axs").innerText = "";
			$("#form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected"); //核心 IE11及以上用这个
			// $('form')[0].reset(); //IE11以下用这个
			return false;
		});
		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			if (data.field.glu == "" && data.field.start == "" && data.field.end == "") {
				layer.msg("请选择异常指标、开始日期和截止日期");
				return false;
			};
			Date.prototype.toLocaleString = function() {
				undefined
				return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日";
			};
			var axs = document.getElementById("axs");
			var obj = document.getElementById("glu");
			var str = "";
			for (i = 0; i < obj.length; i++) { //下拉框的长度就是它的选项数.
				if (obj[i].selected == true) {
					if (obj[i].text != "请选择") {
						str = obj[i].text; //获取当前选择项的文本.
					}
				}
			}
			var oldTime = (new Date(data.field.start)).getTime();
			var unixTimestamp = new Date(oldTime * 1);
			commonTime = unixTimestamp.toLocaleString();

			var oldTime1 = (new Date(data.field.end)).getTime();
			var unixTimestamp1 = new Date(oldTime1 * 1);
			commonTime1 = unixTimestamp1.toLocaleString();
			axs.innerText = str + "异常数据表" + commonTime + "-" + commonTime1;
			init(data.field);
			return false;
		});
		
		layer.ready(function(){//初始化加载
			var data={};
		  	data.start=startTime();
			data.end=endTime();
			data.glu=1;
			Date.prototype.toLocaleString = function() {
				undefined
				return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日";
			};
			var axs = document.getElementById("axs");
			var str = "血糖";
			axs.innerText = str + "异常数据表" + data.start + "-" + data.end;
			init(data);
		});
		
	});
</script>
